<template>
  <div class="collect">
    <!-- <header>
      <h1>
        业务办理>
      </h1>
    </header> -->
    <nav>
      <!-- <mt-navbar v-model="selected">
      <mt-tab-item v-for="(data,index) in datalist" :key="index" :id="index">{{data}}</mt-tab-item>
    </mt-navbar> -->
      <el-steps :active="active" finish-status="success" :align-center="true">
        <el-step v-for="(data,index) in datalist" :title="data" :key="index"></el-step>
      </el-steps>
    </nav>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item v-for="(data,index) in contlist" :key="index" :id="index">
        <component :is="data" @carStep="carStep" @carStep2="carStep2" @nextStep="nextStep" @nextStep2="nextStep2" @nextStep3="nextStep3" @beforeStep="beforeStep" @beforeStep2="beforeStep2"></component>
      </mt-tab-container-item>
    </mt-tab-container>


  </div>
</template>

<script>
  import PropertySituation from './information/PropertySituation'
  import OwnOperatingVehicles from './information/OwnOperatingVehicles'
  import LoanSituation from './information/LoanSituation'
  import Success from './information/Success'
  import Car from './information/Car'
  import Upload from './padUpload/Upload'
  export default {
    name: 'Collect',
    data() {
      return {
        selected: 0,
        datalist: ['车辆信息', '房产情况', '自有营运车辆情况', '已有贷款情况', '附件上传', '完成'],
        contlist: ['Car', 'PropertySituation', 'OwnOperatingVehicles', 'LoanSituation', 'Upload', 'Success'],
        active: 0,
      }
    },
    methods: {
      carStep(data) {
        this.active = data;
      },
      carStep2(data) {
        this.selected = data;
      },
      beforeStep(data) {
        this.active = data;
      },
      beforeStep2(data) {
        this.selected = data;
      },
      nextStep(data) {
        this.active = data;
      },
      nextStep2(data) {
        this.selected = data;
      },
      nextStep3(data) {
        this.active = data;
      },
    },
    components: {
      PropertySituation,
      Car,
      OwnOperatingVehicles,
      LoanSituation,
      Success,
      Upload
    },
    mounted() {
      // var that = this;
      this.$store.commit('title', '车辆信息')
      // var step = document.querySelectorAll('.el-step')
      // var len = step.length
      // for (let i = 0; i < len; i++) {
      //   step[i].onclick = function () {
      //     that.selected = i;
      //     that.$store.commit('title', that.datalist[i])
      //   }
      // }
    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

  .collect {
    margin-top: 52px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  nav {
   width: 80%;
  }

  .mint-tab-container {
    height: 100%;
    width: 100%;
  }

</style>
